<template>
    <div id="mylist">
        <div id="add">
            <span>客户列表</span>
            <el-button type="success" @click="add">新增客户</el-button>
        </div>
        <div id="mycustom">
            <div style="float: left">
                <span>查找客户</span>
                <el-input
                    v-model="newQueryValue"
                    placeholder="请输入客户名称"
                    style="width: 300px"
                ></el-input>
                <el-button type="success" @click="query">查找</el-button>
                <!-- <el-button type="danger">添加</el-button> -->
            </div>
        </div>

        <div id="list">
            <el-table :data="alluser" border style="width: 100%">
                <el-table-column fixed prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="phone" label="电话"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            @click="handleClick(scope.row._id)"
                            type="text"
                            size="small"
                            >修改</el-button
                        >
                        <el-button
                            type="text"
                            size="small"
                            @click="deleteById(scope.row._id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <div class="block">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("users");
export default {
    mounted() {
        this.setId(JSON.parse(localStorage.loginUser)._id);
        this.setSalespersonsId(JSON.parse(localStorage.loginUser)._id);
        this.getUsers();
    },
    computed: {
        ...mapState(["currentPage", "pageSize", "alluser", "total", "value"]),
        newQueryValue: {
            get() {
                return this.value;
            },
            set(val) {
                this.setValue(val);
            },
        },
    },
    methods: {
        ...mapMutations([
            "setPageSize",
            "setCurrentPage",
            "setId",
            "setValue",
            "setUserId",
            'setSalespersonsId'
        ]),
        ...mapActions(["getUsers", "deleteUsersById", "getUsersById"]),
        async handleClick(_id) {
            // console.log(_id);
            await this.setUserId(_id);
            this.getUsersById();
            this.$router.push("/System/modifyUser");
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.setPageSize(val);
            this.getUsers();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.setCurrentPage(val);
            this.getUsers();
        },
        deleteById(_id) {
            console.log(_id);
            this.setUserId(_id);
            this.deleteUsersById();
            this.getUsers();
        },
        query() {
            this.setCurrentPage(1);
            this.getUsers();
        },
        add() {
            this.$router.push("/System/addUser");
        },
    },
};
</script>

<style lang="scss">
#mylist {
    margin: 0 auto;
    width: 90%;
    overflow: hidden;
    #add {
        float: left;
        margin: 20px 0;
        .el-button {
            width: 80px;
            height: 30px;
            margin-left: 20px;
        }
    }
    #mycustom {
        margin: 20px 0;
        text-align: left;
        div {
            width: 1000px;
            margin-bottom: 10px;
            .el-input {
                margin-left: 20px;
            }
            .el-button {
                width: 80px;
                height: 30px;
                margin-left: 20px;
            }
        }
    }
    .el-table--border th .cell,
    .el-table--border td .cell {
        text-align: center;
        line-height: 40px;
        font-size: 17px;
        .el-button {
            font-size: 17px;
            margin: 5px;
        }
    }
    .block {
        margin: 20px;
        span {
            font-size: 16px !important;
        }
    }
}
</style>